<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom</title>
		<style type="text/css">
			.myclass{
				background-color: blue;
			}
			.myclass2{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="ww" style="color: red;font-size:20px;" class=myclass>
			我是王五
		</div>
		<div>
			我是张三
		</div>
		<div  >
			我是李四
		</div>
		<button onclick="changeColor()">
			变绿色
		</button>
		<button onclick="removeColor()">
		    取消颜色
		</button>
		<input type="" name="username" id="username" value="" />
	    <button onclick="getValue">获取值</button>
	</body>
	<script type="text/javascript">
		function getValue() {
			let oInput =document.getElementById('username')
		    alert(oInput.value)
		}
	//childnoes获取孩子节点 数组
	//parentNode获取父亲节点 单个对象
	//fristChild 获取第一个子节点
	//lastChild 获取最后一个子节点
	//nextSibling 获取下一个兄弟节点
	//previousSibling获取前一个兄弟节点	
//	console.dir(document.documentElement.innerText)
//	console.dir(document.documentElement.childNodes[2].childNodes[1])
	let myDiv =document.documentElement.childNodes[2].childNodes[1]
	let myBody = myDiv.parentNode
	//console.dir(myDiv)
	let zhangsan =myDiv.nextSibling.nextSibling
	 //console.dir(zhangsan.innerText)
	let wangwu=zhangsan.previousSibling.previousSibling
    //getAttribute 获取对象属性值
    console.dir(wangwu.getAttribute("style"))
    //setAttribute（'name',value)
    //remoceAttribute移除对象属性值
    console.dir(wangwu.getAttribute("style"))
    //getElementById('id')返回一个对象
    //getElementClassName('classname')返回的是列表
    //getElementTagname('tagname')返回的是列表
    wangwu=document.getElementById('ww')
    let lisi =document.getElementById('ls')
    console.dir(lisi)
    function changeColor(){
    	wangwu.style.color ='green'
    	wangwu.style.fontSize='50px'
    	wangwu.className=''
    }
    function removeColor(){
    	wangwu.style.display='none'
    }
    let
</script>
</html>
